<template>
  <div class="taglist">
    <el-tag
      class="pointer"
      v-for="(tag, index) in tagList"
      :effect="fullPath == tag.fullPath ? 'dark' : 'light'"
      :key="tag.fullPath"
      type=""
      :closable="tagList.length > 1"
      @click="onTag(tag.fullPath)"
      @close="onClose(index)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import CryptoJS from "crypto-js";
export default {
  data() {
    return {
      tagList: [],
      fullPath: "",
    };
  },
  async mounted() {
    let to = this.$route;
    if (
      to.name != "qrCode" &&
      to.name != "Container" &&
      to.name != "Procurement" &&
      to.meta.keepAlive
    ) {
      let tagList = this.tagList;
      let istrue = tagList.some(
        (value, index) => value.fullPath == to.fullPath
      );
      if (!istrue) {
        let arr = to.fullPath.split("/");
        let obj;
        if (arr.length > 2) {
          if (arr[1] == "CustomModuleDesignFilesDetail") {
            arr[2] = await this.decrypt(arr[2]);
          }
          obj = {
            fullPath: to.fullPath,
            label: to.meta.title + arr[2],
          };
        } else {
          obj = {
            fullPath: to.fullPath,
            label: to.meta.title,
          };
        }
        tagList.push(obj);
        this.tagList = tagList;
      }
      this.fullPath = to.fullPath;
    } else {
      this.fullPath = to.fullPath;
    }
  },
  methods: {
    // 解密
    decrypt(word) {
      const key = CryptoJS.enc.Utf8.parse("SHISANYUABCDEF16"); //十六位十六进制数作为密钥
      const iv = CryptoJS.enc.Utf8.parse("61FEDCBASHISANYU"); //十六位十六进制数作为密钥偏移量
      let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
        let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
        let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
        let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
        return decryptedStr.toString();
    },

    // 加密
    encrypt(word) {
      const key = CryptoJS.enc.Utf8.parse("SHISANYUABCDEF16"); //十六位十六进制数作为密钥
      const iv = CryptoJS.enc.Utf8.parse("61FEDCBASHISANYU"); //十六位十六进制数作为密钥偏移量
      let srcs = CryptoJS.enc.Utf8.parse(word);
      let encrypted = CryptoJS.AES.encrypt(srcs, key, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
        padding: CryptoJS.pad.Pkcs7,
      });
      return encrypted.ciphertext.toString().toUpperCase();
    },
    async onTag(e) {
      if (this.$route.fullPath != e) {
        let arr = e.split("/");
        console.log("arr", arr);
        this.$router.replace({
          name: "CustomModuleRouter",
          params: { path: e },
        });
      }
    },
    onClose(e) {
      let tagList = this.tagList;
      if (tagList.length > 1) {
        tagList.splice(e, 1);
        this.tagList = tagList;
        this.$router.replace({
          name: "CustomModuleRouter",
          params: { path: tagList[tagList.length - 1].fullPath },
        });
      }
    },
  },
  watch: {
    async $route(to, from) {
      console.log("to", to);
      if (
        to.name != "qrCode" &&
        to.name != "LoginMM" &&
        to.name != "Container" &&
        to.name != "Procurement" &&
        to.meta.keepAlive
      ) {
        let tagList = this.tagList;
        let istrue = tagList.some(
          (value, index) => value.fullPath == to.fullPath
        );
        if (!istrue) {
          let arr = to.fullPath.split("/");
          let obj;
          if (arr.length > 2) {
            if (arr[1] == "CustomModuleDesignFilesDetail") {
              arr[2] = await this.decrypt(arr[2]);
            }
            obj = {
              fullPath: to.fullPath,
              label: to.meta.title + arr[2],
            };
          } else {
            obj = {
              fullPath: to.fullPath,
              label: to.meta.title,
            };
          }

          tagList.push(obj);
          this.tagList = tagList;
        }
        this.fullPath = to.fullPath;
      } else {
        this.fullPath = to.fullPath;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.taglist {
  display: flex;
  /deep/ .el-tag {
    border-radius: 0;
    padding: 0 15px !important;
  }
}
</style>